<template>
  <div>
   <!-- 表格 -->
    <el-table
      :data="wormList.records"
      style="width: 100%"
      text-align="center"
      height="200"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <el-table-column fixed prop="wormName" label="名称" width="335">
      </el-table-column>
      <el-table-column prop="wormHarm" label="主要危害" width="345">
      </el-table-column>
      <el-table-column prop="wormLaw" label="发病规律" width="340">
      </el-table-column>
    </el-table>

   <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="wormList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>

    <!-- 添加新病害 -->
    <div style="text-align: left">
      <el-button
        type="info"
        @click="dialogFormVisible = true"
        style="
          width: 100px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加新病害</el-button
      >
      <el-dialog
        title="添加病害"
        :visible.sync="dialogFormVisible"
        width="60%"
        custom-class="customClass"
      >
        <div style="display: flex" class="msg">
          <div>
            <p style="margin: 50px 30px">
              名称：<input type="text" v-model="wormName" />
            </p>
            <p style="margin: 50px 30px">
              发病症状：<input type="text" v-model="wormSp" />
            </p>
            <p style="margin: 50px 30px">
              图片：<el-upload
              class="avatar-uploader"
              action="/api/upload/upload"
              :http-request="testUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload" >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:50px;height:50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              
              <!-- <input type="file" name="" id="" /> -->
            </p>
            <p style="margin: 50px 30px">
              主要危害：<input type="text" v-model="wormHarm" />
            </p>
          </div>
          <div>
            <p style="margin: 50px 30px">
              病原：<input type="text" v-model="wormPath" />
            </p>
            <p style="margin: 50px 30px">
              发病规律：<input type="text" v-model="wormLaw" />
            </p>
            <p style="margin: 50px 30px">
              防治措施：<input type="text" v-model="wormControl" />
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addWorm()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查看详细信息 -->
      <el-button
        type="info"
        @click="findId2(wormId)"
        style="
          width: 107px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >查看详细信息</el-button
      >
      <el-dialog
        title="病害详细信息"
        :visible.sync="dialogVisible"
        width="650px"
        :before-close="handleClose"
      >
        <div class="msg" style="display: flex">
          <div style="width: 400px">
            <p style="margin: 50px 30px">名称：{{ list.wormName }}</p>
            <p style="margin: 50px 30px">病原： {{ list.wormPath }}</p>
            <p style="margin: 50px 30px">发病症状：{{ list.wormSp }}</p>
            <p style="margin: 50px 30px">发病规律:{{ list.wormLaw }}</p>
            <p style="margin: 50px 30px">主要危害：{{ list.wormHarm }}</p>
          </div>
          <div style="width: 400px; ">
            <p style="margin: 50px 30px;align-items: center;">
              图片：<img :src="'/api'+list.wormImg" alt="哦豁，图片找不到瓜了" style="width:160px;"/>
            </p>
           <p style="margin: 50px 30px">防治措施：{{ list.wormControl }}</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 模糊查询 -->
      <session>
        <div>
          <fieldset style="width: 200px">
            <legend>查询病害信息</legend>
            <form action="" style="width: 260px">
             病&nbsp;害&nbsp;名&nbsp;称
              <input type="text" v-model="wormName" style="margin-top: 20px"/><br>
             发&nbsp;病&nbsp;症&nbsp;状
              <input type="text" v-model="wormSp" style="margin-top: 20px"/>
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 140px;margin-top: 10px"
              />
            </form>
          </fieldset>
        </div>
      </session>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
   data() {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: "70px",
      wormId:"",
      wormName: "", //名称
      wormPath: "", //病原
      wormSp: "", //发病症状
      wormLaw: "", //发病规律
      wormImg: "", //图片
      wormControl: "", //防治措施
      wormHarm: "", //主要危害
      list:[],
      pageNo:"",
      pages:"",
      imageUrl:""
    };
  },
  computed:{
    ...mapState("pest",["wormList","wormParam"])
  },
  methods:{
    ...mapActions("pest",["findAllWorm"]),
    ...mapMutations("pest",["setWormParam"]),
    ...mapActions("pest",["findWormName"]),
    async addWorm(){
       let parmaObj = {
        wormName: this.wormName,
        wormPath: this.wormPath,
        wormSp: this.wormSp,
        wormLaw: this.wormLaw,
        wormImg: this.wormImg,
        wormControl: this.wormControl,
        wormHarm: this.wormHarm,
      };
      let info = await this.ajax.getSubmit("/api/worm/addWorm", parmaObj);
      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogFormVisible = false;
      this.findAllWorm();
    },
    async findId2(wormId) {
      let paramObj = { wormId: this.wormId };
      let info = await this.ajax.getSubmit("/api/worm/findId", paramObj);
      console.log(info);
      this.list = info;
      this.dialogVisible = true;
    },
    async testUpload(item) {
      let info = await this.ajax.uploadSubmit("/api/upload/upload", {
        file: item.file,
      });
      console.log(info);
      this.imageUrl = "/api/img/" + info;
      this.wormImg = "/img/" + info;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    get() {
      let paramObj = this.wormParam;
      paramObj.wormName = this.wormName;
      paramObj.wormSp = this.wormSp;
      // 把最新的信息装入 store中的 param对象中
      this.setWormParam(paramObj);
      this.findWormName()
    },
     handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.wormParam;
      paramObj.pageNo = pageNo;
      this.setWormParam(paramObj);
      this.findAllWorm();
    },
    handleTableRow(row) {
      console.log(row.wormId);
      this.wormId = row.wormId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  created(){
    this.findAllWorm()
    console.log(this.wormList.records)
    console.log(this.wormList.pages);
  }


}
</script>

<style>
#input1{
  height: 28px;
}
div > div > session {
  position: relative;
}
div > div > session > div:first-child {
  position: absolute;
  left: 330px;
  bottom: -75px;
}
</style>